<template>
    <z-paging @pageScroll="pageScroll" ref="paging" v-model="spArrary" @query="queryList" :refresher-enabled="false">
        <view class="header_box">
            <view class="biaoti_box">
                <view class="left_icon_box" @click="back">
                    <image src="https://www.dingxians.cn/upload/20250324/67e13c80ecef6.png" mode="scaleToFill" />
                </view>
                <view class="center_biaoti_box">
                    幸运屋
                </view>
                <view class="left_icon_box">
                    <!-- 占位 -->
                </view>
            </view>
        </view>
            <!-- <view class="zhanwei" style="height: 172rpx;"></view> -->
            <view class="neirong1_box" style="background-image: url('https://www.dingxians.cn/upload/user_static/user/vip-bg.png');"
                v-for="(item, index) in spArrary" :key="index">
                <view class="dange1_box">
                    <image :src="item.image" mode="widthFix" />
                </view>
                <view class="zhongjian_box">
                    <view class="topname_box slh">
                        {{ item.name }}
                    </view>
                    <view class="price_box">
                        {{ item.price }} <text style="font-size: 21rpx;">￥</text>
                    </view>
                    <view class="line_box"></view>
                    <view class="shengyu_box">{{ item.content }}</view>
                </view>
                <view class="jinjieanniu_box" style="background-image: url('https://www.dingxians.cn/upload/user_static/common/btn-primary.png');"
                    @click="header('/pages/xyw/detail?id=' + item.id)">立即参与</view>
            </view>
            <view class="jilu_box" style="background-image: url('https://www.dingxians.cn/upload/20250509/681da3814f6bd.png');"
                @click="header('/pages/xyw/log')">查看记录</view>
    </z-paging>
</template>

<script>
import api from '../../api/index.js'
export default {
    components: {},
    data() {
        return {
            spArrary: [],//商品列表
        };
    },

    onLoad() { },
    methods: {
        back(){
uni.navigateBack({ delta: 1 })
        },
        // 商品列表
        queryList(pageNo, pageSize) {
            let data = {
                page: pageNo,
                limit: pageSize
            }
             api.users.luckDraws(data).then(res => {
                if (res.code == 200) {
                    this.$refs.paging.complete(res.data.data)
                }
            })
        },
    },
};
</script>

<style lang="scss">
::v-deep.zp-scroll-view-absolute {
    background-image: none !important;
    background-color: #000 !important;
}

.header_box {
    width: 750rpx;
    height: 180rpx;
    box-sizing: border-box;
    padding-top: 92rpx;

    .biaoti_box {
        width: 100%;
        height: 88rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 20rpx;

        .left_icon_box {
            width: 80rpx;
            height: 80rpx;

            image {
                width: 100%;
                height: 100%;
            }
        }

        .center_biaoti_box {
            width: 380rpx;
            height: 88rpx;
            line-height: 88rpx;
            text-align: center;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            font-size: 40rpx;
            color: #fff;
            font-weight: 900;
        }
    }
}

.neirong1_box {
    width: 691rpx;
    height: 270rpx;
    margin: auto;
    background-size: 100% 100%;
    box-sizing: border-box;
    padding: 16rpx 0 0 44rpx;
    display: flex;
    justify-content: flex-start;
    position: relative;
    margin-bottom: 30rpx;

    .jinjieanniu_box {
        width: 172rpx;
        height: 72rpx;
        position: absolute;
        right: 34rpx;
        text-align: center;
        line-height: 65rpx;
        font-family: Source Han Serif CN;
        font-weight: bold;
        font-size: 24rpx;
        color: #FFFFFF;
        top: 105rpx;
        background-size: 100% 100%;
    }

    .dange1_box {
        width: 147rpx;
        height: 232rpx;
        margin-right: 33rpx;
        margin-top: 56rpx;


        image {
            width: 100%;
            height: 100%;
        }
    }

    .zhongjian_box {
        width: 250rpx;
        height: 100%;
        box-sizing: border-box;
        padding-top: 64rpx;



        .topname_box {
            width: 280rpx;
            height: 40rpx;
            line-height: 40rpx;
            font-family: Source Han Serif CN;
            font-weight: bold;
            font-size: 26rpx;
            color: #FFFFFF;
            // margin-bottom: 10rpx;
        }

        .price_box {
            width: 198rpx;
            height: 50rpx;
            background-size: 100% 100%;
            line-height: 50rpx;
            text-align: center;
            font-family: FZZongYi-M05S;
            font-weight: 400;
            font-size: 31rpx;
            color: #FFFFFF;
            margin-bottom: 8rpx;
        }

        .line_box {
            width: 280rpx;
            height: 1rpx;
            background: #97BCC1;
            // opacity: 0.5;
            margin-bottom: 25rpx;
        }

        .shengyu_box {
            width: 100%;
            // height: 26rpx;
            // line-height: 26rpx;
            font-family: Source Han Serif CN;
            font-weight: bold;
            font-size: 15rpx;
            color: #FFFFFF;
        }
    }
}

.jilu_box {
    width: 291rpx;
    height: 80rpx;
    text-align: center;
    line-height: 80rpx;
    font-family: Source Han Serif CN;
    font-weight: bold;
    font-size: 30rpx;
    color: #FFFFFF;
    position: fixed;
    bottom: 80rpx;
    left: 0;
    right: 0;
    margin: auto;
    background-size: 100% 100%;
}
</style>